<template>
  <div>
    <a-tabs type="card">
      <a-tab-pane
        v-for="page in node.children || {}"
        :key="page.nodename"
        :tab="page.string"
      >
        <template v-for="node2 in page.children || {}" :key="node2.nodename">
          <!-- <div>{{ node2.nodename }}</div>
          <div>{{ node2 }}</div> -->

          <TagNode
            :model="model2"
            :node="node2"
            :formInfo="formInfo"
            @change="onChange"
          />
        </template>
      </a-tab-pane>

      <!-- -->
    </a-tabs>
  </div>
</template>

<script setup>
import TagNode from './TagNode.vue'

import { computed } from 'vue'

const props = defineProps(['model', 'node', 'formInfo'])
const emit = defineEmits(['change'])
const model2 = computed({
  get() {
    return props.model || {}
  },

  // eslint-disable-next-line no-unused-vars
  set(val) {
    // state.mVal = {...}
  }
})

function onChange(fname, value) {
  // console.log('onChange  ', fname, value)
  emit('change', fname, value)
}
</script>

<style type="text/css"></style>
